<template>
  <div class="wxWelAttach">
    <el-dialog :title="dialogTitle()" :visible.sync="attachDialogShow" width="60%" @close="closeDialog">
      <div class="attache-img" v-if="show('pic')">
        <wx-file-upload ref="pic" multiple
                        :list="currentEditData"
                        file-types="png,jpg,jpeg"
                        :limit="editIndex>-1?1:9"
                        :tips="welcomeImgTips()"/>
      </div>
      <!--  小程序    -->
      <wx-miniprogram :model="currentEditData" ref="mini" v-if="show('mini')"/>
      <!--   图文   -->
      <wx-welcom-link :model="currentEditData" ref="link" v-if="show('link')"/>
      <!--   文件   -->
      <wx-welcom-file :model="currentEditData" ref="file" v-if="show('file')"/>
      <!--视频-->
      <wx-welcom-video :model="currentEditData" ref="video" v-if="show('video')"/>

      <span slot="footer" class="dialog-footer">
        <el-button @click="attachDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="attachDialogSure">确 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="attachements" v-show="attachements.length">
      <el-table-column label="素材">
        <template slot-scope="{row}">
          <div v-if="row.content.title">{{ row.content.title }}</div>
          <div class="d-flex flex-row" v-if="show(row.type,['pic','mini'])">
            <el-image class="tab-img" :src="row.content.url" fit="fill" v-if="row.content.url"/>
          </div>
          <div class="d-flex flex-row" v-if="show(row.type,'link')">
            <el-image class="tab-img" :src="row.content.picurl" fit="fill" v-if="row.content.picurl"/>
          </div>
          <wx-tooltip v-if="show(row.type,'file')">{{ row.url }}</wx-tooltip>
          <wx-video :url="row.content.url" v-if="show(row.type,'video')"/>
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="{row}">{{ menus[row.type] }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row,$index}">
          <wx-link @click.native="editWelcom(row,$index)">编辑</wx-link>
          <wx-link type="danger" @click.native="deleteWelcom($index)">删除</wx-link>
        </template>
      </el-table-column>
    </el-table>

    <div class="attche-add-btn">
      <el-popover placement="top-start"
                  width="80"
                  popper-class="attche-popper"
                  trigger="hover">
        <el-menu text-color="#32bc04" class="attache-menu" active-text-color="#52a606" @select="selectAttachMenu">
          <el-menu-item :index="key" v-for="(val,key) in menus" :key="key">
            <span slot="title">{{ val }}</span>
          </el-menu-item>
        </el-menu>

        <el-button slot="reference" size="mini" type="primary">
          <i class="el-icon-plus"/>新增附件
        </el-button>
      </el-popover>
    </div>
  </div>
</template>

<script>
import WxFileUpload from "@/components/wxqy/wxFileUpload/wxFileUpload";
import WxMiniprogram from "@/components/wxqy/wxWelAttach/wxMiniprogram";
import WxLink from "@/components/wxqy/wxLink/wxLink";
import {isString} from "@/utils/validate";
import WxWelcomLink from "@/components/wxqy/wxWelAttach/wxWelcomLink.vue";
import WxWelcomFile from "@/components/wxqy/wxWelAttach/wxWelcomFile.vue";
import WxWelcomVideo from "@/components/wxqy/wxWelAttach/wxWelcomVideo.vue";
import WxTooltip from "@/components/wxqy/wxTooltip/wxTooltip.vue";
import WxVideo from "@/components/wxqy/wxVideo/wxVideo.vue";

/**
 * @param attachs 回显数据
 * @Fun findAttachements 获取欢迎语数据
 */
export default {
  name: "wxWelAttach",
  components: {WxVideo, WxTooltip, WxWelcomVideo, WxWelcomFile, WxWelcomLink, WxLink, WxMiniprogram, WxFileUpload},
  props: ['attachs'],
  data() {
    return {
      currentEditData: null,
      attachDialogShow: false,
      showType: null,
      editIndex: -1,
      attachements: this.attachs || [],
      menus: {pic: '图片', link: '图文', mini: '小程序', file: '文件', video: '视频'}
    }
  },
  watch: {
    attachs: function (v) {
      this.attachements = v
    }
  },
  methods: {
    welcomeImgTips() {
      let img = this.attachements.img || []
      return this.editIndex > -1 ? '支持jpg/jpeg/png格式，图片大小不超过10M' : `支持jpg/jpeg/png格式，图片大小不超过10M，支持最多${9 - img.length}张批量上传`
    },
    /**
     * @param type2 {string,array}
     */
    show(type, type2) {
      if (type2 && type2.length) {
        return isString(type2) ? type === type2 : type2.includes(type)
      }
      return this.showType === type
    },
    removeAttache() {

    },
    dialogTitle() {
      let pre = this.editIndex > -1 ? '编辑' : '新建'
      return pre + this.menus[this.showType]
    },
    selectAttachMenu(type) {
      this.currentEditData = null
      this.showType = type
      this.editIndex = -1
      this.attachDialogShow = true
    },
    closeDialog() {
      this.showType = ''
    },
    addAttachement(type, content) {
      this.attachements.push({type: type, content: content})
    },
    pic(type, data, index) {
      if (index > -1) {
        this.attachements[index].content = data[0]
      } else {
        for (let i = 0; i < data.length; i++) {
          this.addAttachement(type, data[i])
        }
      }
    },
    link(type, data, index) {
      if (index > -1) {
        this.attachements[index].content = data
      } else {
        this.addAttachement(type, data)
      }
    },
    mini(type, data, index) {
      if (index > -1) {
        this.attachements[index].content = data
      } else {
        this.addAttachement(type, data)
      }
    },
    attachDialogSure() {
      let type = this.showType
      let {success, data} = this.$refs[type].findData()
      if (success) {
        let success = this[type](type, data, this.editIndex)
        this.attachDialogShow = false
      }
      console.log(JSON.stringify(data))
    },
    editWelcom(row, index) {
      this.editIndex = index
      this.showType = row.type
      this.currentEditData = this.showType === 'pic' ? [{url: row.content.url}] : row.content
      this.attachDialogShow = true
    },
    deleteWelcom(index) {
      this.attachements.splice(index, 1)
    },
    findAttachements() {
      return this.attachements
    }
  }
}
</script>

<style scoped lang="scss">
.wxWelAttach {

  .attache-img {
    margin-bottom: 20px;
  }
}

.attache-menu {
  border: none;
  padding: 0;
  margin: 0;
}

.attache-menu .el-menu-item {
  height: 40px;
  line-height: 40px;
  padding: 0 !important;
  text-align: center;
}
</style>
<style>
.attche-popper {
  min-width: 50px;
  padding: 0;
  margin: 0;
}

.tab-img {
  width: 100px;
  height: 100px;
}
</style>
